<template>
	<view class="index_pages" >
		<view class="index_nav" v-if="isshowtop" :style="'padding-top:'+ (statusBarHeight+80) +'rpx'"></view>		
		<view class="embassy" :style="'padding-top:'+ (statusBarHeight+80) +'rpx'">
			<!-- <view class="embassy_img" :style="{backgroundImage:'url('+photo_cdn+'zpupload/20231030/57f3cf74ce2b209498.png)'}"></view> -->
			<view style="position: relative; align-items: center; display: flex;">
				<scroll-view ref="tabbar1"   style=" flex-direction: row;width: 100%;" scroll-x :scroll="false" :show-scrollbar="false" >
					<view style=" display: flex;  justify-content:space-between; align-items: center;">
						<view class="" style="" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
				            :data-id="index" :data-current="index" @tap="tabnav(tab)">
							<image v-if="nav_active == tab.id" :src="photo_cdn+tab.imgindexurl" mode="aspectFit"  style="width: 140rpx;height: 40rpx;"></image>
							<image v-if="nav_active != tab.id"  :src="photo_cdn+tab.imgurl" mode="aspectFit"  style="width: 140rpx;height: 40rpx;"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- #ifndef MP-WEIXIN -->
		<u-notice-bar mode="horizontal" :duration="1500"   :list="list"></u-notice-bar>
		<!-- #endif -->
		<view  style="display: flex; flex: 1;width: 750rpx;">
			<swiper style="width: 100%; "  :style="{height: WinHeight+20+'px'}" :current-item-id="nav_active" circular :disable-touch="true">
				<swiper-item  v-for="(item,index) in tabBars" :key="index" :item-id="item.id">
					
					<view v-if="item.id == 1">
						<!-- <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="width: 100%; "  :style="{height: WinHeight +'px'}"  > -->
							<home :idtype="'nav' + nav_active" :swiperList="swiperList" ></home>				
						<!-- </scroll-view> -->					
					</view>
					
					<view class="" v-if="item.id == 2">
						<findPu style="margin-bottom: 30px;" :idtype="'nav' + nav_active"></findPu>			
					</view>
					
					<view class="" v-if="item.id == 3">
						<celebrityList style="margin-bottom: 30px;" :idtype="'nav' + nav_active" ></celebrityList>				
					</view>
					
					<view class="" v-if="item.id == 4">
						<xsk  :idtype="'nav' + nav_active"></xsk>
					</view>
					
				</swiper-item>
			</swiper>
		</view>
		
		<login :hidden="isshowlogin" @close="closefun" @loginsucc="loginsucc"></login>
		
	<!-- 	<reference ref="reference"></reference>
		<appupdate ref="appupdate" ></appupdate> -->
		<q-tabbar :active="0" :count="[0,0,0,0,0]"></q-tabbar>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	import {familyList,openFamilyList} from "@/utils/api/zupu.js";
	import { getUserinfo } from "@/utils/api/api.js";
	let { photo_cdn } = config.baseUrl;
	import appupdate from "@/components/appupdate/appupdate.vue";
	import { Handleqrcode } from '@/utils/yicode.js'; //扫码
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	//首页
	import  home from"@/pages/index/components/home/home.vue"
	//名人馆
	import  celebrityList  from "@/pages/index/components/celebritylist/celebritylist.vue";
	//公开巡谱
	import  findPu from "@/pages/index/components/findpu/findpu.vue";
	//姓氏库
	import xsk from "@/pages/index/components/xsk/xsk.vue"
	import {getPagesIndex} from "@/utils/api/zupu.js"
	export default {
		components:{
			appupdate,
			home,
			findPu,
			celebrityList,
			xsk
		},
		data() {
			return {
				photo_cdn,
				isshowlogin: false,
				title: 'Hello',
				scrollHeight: 0,
				userInfo: {},
				isshowtop: false,
				statusBarHeight: 0, //通知栏高度
				swiperList: [],
				example_pu:{},
				// judge_list:[],//判断有没有加入族谱
				nav_active:'1',
	
				animationData: {},
				title: '',
				indicatorDots: false,
				autoplay: false,
				previousMargin: uni.upx2px(82)+'px',
				nextMargin: uni.upx2px(82)+'px',
				circular: true,
				zoomParam: 1.10,
				swiperCurrentIndex: 0,
				data: [],
				max: 0,
				tabBars:[],
				WinHeight:500,
				list: []
			}
		},
		computed: {
			...mapState({
				isinit:state=>state.base.isinit,
				// item_active:state=>state.treedata.item_active,//选中的id
			}),
		},
		onLoad(Option) {
			//获取设备高度
			this.WinHeight = uni.getWindowInfo().windowHeight - 50 ;
			// #ifdef APP-PLUS
			setTimeout(()=>{
				this.$refs.appupdate.update();//请求更新
			},2000)
			// #endif
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
			let scancodedata = uni.getStorageSync('scancodedata')
			
			if(scancodedata){
				console.info("处理之前没处理的扫码内容");
				Handleqrcode(scancodedata);//解析扫码
				return false;
			}
			if (Option.q) {
				let jxurl = decodeURIComponent(Option.q)
				uni.setStorageSync('scancodedata',jxurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(jxurl);//解析扫码
				return false;
			}
			//朋友圈和微信分享进来的
			if(Option.type==1 && Option.user_id){
				let ddurl = `xxx.com?type=${Option.type}&imuser_id=${Option.imuser_id}`;
				uni.setStorageSync('scancodedata',ddurl);//存储起来 防止没登录 登录后要重新请求
				Handleqrcode(ddurl);//解析扫码
				return false;
			}
			
			this.animation = uni.createAnimation();
			this.animation.scale(this.zoomParam).step();
			// this.animationData[0] = this.animation.export();
		},
		onShow() {
			this.getUserinfofun();
			// this.swiperList = [];
			this.onGetPagesIndex();
			this.updateTreedataItem({val:"",key:'item_active'});			
			let token = uni.getStorageSync("token")
			if (!token) {
				//暂时不弹出 因为用户一进来 没有任何操作是不可以弹窗登录的
				// #ifdef MP-WEIXIN
				// setTimeout(() => {
				// 	this.isshowlogin = true;
				// }, 1500)
				// #endif
			} else {
				this.getUserinfofun();
			}
			
			//解析二维码
			//处理扫码
			let scancodedata = uni.getStorageSync('scancodedata')
			if(scancodedata){
				console.info("处理之前没处理的扫码内容");
				Handleqrcode(scancodedata);//解析扫码
				// return false;
			}
			
			this.nav_active = '1';
			// this.FamilyListfun();
		},
		onReady() {
			this.computeheight()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 100) {
				this.isshowtop = true;
			} else {
				this.isshowtop = false;
			}
		},
		onPullDownRefresh() {
			this.getUserinfofun();
			this.swiperList = [];
			this.FamilyListfun();
			setTimeout(() => {
				uni.stopPullDownRefresh(); //结束下拉刷新
			}, 1500)
		},
		onShareAppMessage: function() {
			let url = "zpupload/20230804/f82ec5c4948c1f4628.png";
			return {
				title: "探寻家族历史，传承家族精神",
				path: "/pages/index/index",
				imageUrl: photo_cdn+url
			}
		},
		//分享朋友圈
		onShareTimeline() {
			let url = "zpupload/20230804/f82ec5c4948c1f4628.png";
			return {
				title: "探寻家族历史，传承家族精神",
				imageUrl: photo_cdn+url
			}
		},
		methods: {
			
			onGetPagesIndex(){
				getPagesIndex().then(res=>{
					this.tabBars = res.data.list.list;
					this.list = res.data.list.lists;
				})
			},
			
			...mapMutations(['updatebaseItem','updateTreedataItem']),
			tocreatepu(){
				
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;//显示去登录
					return ;
				} else {
					uni.navigateTo({
						url:'/pages/zupu/createzupu/createzupu'
					})
				}
			},	
			//样谱
			async openFamilyListfun(){
				let res = await openFamilyList({
					
				})
				if(res.code==1){
					res.data.list.forEach(item =>{
						if(item.is_sample==1){
							this.example_pu = item;
						}
					})										
				}
			},
			
			async FamilyListfun(){
				await this.openFamilyListfun();
				//source:0我的族谱 source:2 我创建的族谱
				let res =  await familyList({
					source:2,
				})
				let restwo =  await familyList({
					source:0,
				})
				if(res.code==1 && restwo.code==1){
					let datatwo = [];
					for(var i in restwo.data){
						datatwo.push(restwo.data[i])
					}
					this.swiperList = [...res.data,...datatwo];
				}else{
					this.swiperList = res.data;
				}
				
				if(res.code==1){
					this.swiperList.push(this.example_pu);//两个数据合并 例谱 一条
					let len = this.swiperList.length;
					//数组去重
					for(let i=0;i<len;i++){
						for(let j=i+1;j<len;j++){
							if(this.swiperList[i].id==this.swiperList[j].id){
								this.swiperList.splice(j, 1);
								len--;
								j--;
							}
						}
					}						

					//初始化 轮播数据动画
					let animationData = {};
					this.swiperList.forEach((item,index)=>{
						animationData[index] = {};
					})
					animationData[0] = this.animation.export();
					this.animationData = animationData;
				}
				if(this.isinit){
					console.info('222222');
					this.updatebaseItem({
						key:'isinit',
						val:0,
					})
					// if(this.judge_list.length){
					// 	//自动进入族谱
					// 	uni.navigateTo({
					// 		url:`/pages/zupu/familytrees/familytrees?family_id=${this.judge_list[0].id}&source=1&type=${this.judge_list[0].type}`
					// 	})
					// }
				}
			},
			
			toFamily(item){
				uni.navigateTo({
					url:`/pages/zupu/familytrees/familytrees?family_id=${item.id}`
				})
			},
			computeheight() {
				let resinfo = uni.getSystemInfoSync();
				let windowHeight = resinfo.windowHeight;
				this.scrollHeight = windowHeight;
			},
			itemClick(item) {
				uni.navigateTo({
					url:`/pages/zupu/familytrees/familytrees?family_id=${item.id}`
				})
			},
			//申请入谱
			apply_for(){
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;
					return ;
				}
				this.$refs.reference.open();
			},
			//关闭授权登录弹窗
			closefun() {
				this.isshowlogin = false;
			},
			//登录完成
			loginsucc() {

			},
			getUserinfofun() {
				getUserinfo({

				}).then((res) => {
					this.userInfo = res.data.userinfo;
					uni.setStorageSync("u_userInfo", res.data.userinfo);
				})
			},
			//加入族谱
			join_zupu() {
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;
					return ;
				}
				this.$refs.reference.open();
			},
			//联系传承人
			contactInheritorn(item){
				uni.navigateTo({
					url:`/pagesim/center/info?id=${item.fastim_id}`
				})
			},
			//轮播图
			swiperTab(e){
				this.currentIndex = e.detail.current
			},
			look_all(){
				let token = uni.getStorageSync("token")
				if (!token) {
					this.isshowlogin = true;//显示去登录
					return ;
				} else{
					uni.navigateTo({
						url:`/pages/zupu/findpu/findpu`
					})
				}			
			},
			//tab切换
			tabnav(item){
				if(this.nav_active==item.id){
					return false;
				}else{
					this.nav_active = item.id
				}
				// if(this.nav_active==2){
				// 	uni.redirectTo({
				// 		url:'/pages/findpu/findpu'
				// 	})
				// }
				// if(this.nav_active==3){
				// 	uni.redirectTo({
				// 		url:'/pages/celebrity/celebritylist/celebritylist'
				// 	})
				// }
			},
			//轮播
			change(e) {
				this.swiperCurrentIndex = e.detail.current;
				this.title = e.detail.currentcurrent;
				for (let key in this.animationData) {
					if (e.detail.current == key) {
						this.animation.scale(this.zoomParam).step();
						this.animationData[key] = this.animation.export();
					} else {
						this.animation.scale(1.0).step();
						this.animationData[key] = this.animation.export();
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>